<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Insert title here</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>
    <!-- 最新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" th:href="@{//cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css}">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script th:src="@{//cdn.staticfile.org/jquery/3.4.1/jquery.min.js}"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script th:src="@{//cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js}"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script th:src="@{//cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js}"></script>
    <!-- DaterangePicker -->
    <link rel="stylesheet" type="text/css" media="all" th:href="@{/daterangepicker/daterangepicker.css}" />
    <!-- BootStrapValidator -->
    <link rel="stylesheet" th:href="@{/css/bootstrapValidator.css}">
    <script type="text/javascript" th:src="@{/js/bootstrapValidator.js}"></script>
    <script th:src="@{/js/functions.js}"></script>
    <script type="text/javascript" th:src="@{/js/validate.js}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            validateForm("editForm");
        });
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="text-center">
                <a type="button" class="btn btn-outline-info" th:href="@{/user/getUserList}">查看所有用户信息</a>
            </div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-10 offset-md-1">
            <h1>1212121</h1>
            <form class="form" id="editForm" th:method="post" th:action="@{/user/updateUser}">
                <input type="hidden" name="userid" th:value="${user.userid}">
                <div class="modal-header">
                    <h4 class="modal-title">请填写修改信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <div class="col-md-2">
                            <label for="username">用户名</label>
                        </div>
                        <div class="col-md-6">
                            <input type="text" id="username" name="username" th:value="${user.username}"
                                   class="form-control input-sm" placeholder="用户名" required readonly/> <span
                                id="result"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-2">
                            <label for="password">密码</label>
                        </div>
                        <div class="col-md-6">
                            <input type="password" id="password" name="password" th:value="${user.password}"
                                   class="form-control input-sm" placeholder="密码" required />
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-2">
                            <label for="password1">密码确认</label>
                        </div>
                        <div class="col-md-6">
                            <input type="password" id="password1" name="password1" th:value="${user.password}"
                                   class="form-control input-sm" placeholder="密码确认" required />
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-2">
                            <label for="realname">姓名</label>
                        </div>
                        <div class="col-md-6">
                            <input type="text" id="realname" name="realname"
                                   th:value="${user.realname}" class="form-control input-sm" placeholder="姓名" />
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-2">
                            <label for="birthdate">出生日期</label>
                        </div>
                        <div class="col-md-6">
                            <input type="text" id="birthdate" name="birthdate"  th:value="${user.birthdate}"
                                   class="form-control input-sm">
                            <script type="text/javascript"
                                    src="./daterangepicker/require.js"
                                    data-main="./daterangepicker/main.js"></script>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-2">
                            <label for="gender">性别</label>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check form-check-inline">
                                <input type="radio" class="form-check-input" name="gender"
                                       value="1" th:checked="${user.gender}==1"> <label class="form-check-label"
                                                                                        for="gender">男</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="radio" class="form-check-input" name="gender"
                                       value="0" th:checked="${user.gender}==0"> <label class="form-check-label"
                                                                                        for="gender">女</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-2">
                            <label for="interest">爱好</label>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check form-check-inline">
                                <input type="checkbox" class="form-check-input" name="interest"	value="旅游" th:checked="${#strings.contains(user.interest,'旅游')}" >
                                <label class="form-check-label"	for="interest">旅游</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="checkbox" class="form-check-input" name="interest"	value="登山" th:checked="${#strings.contains(user.interest,'登山')}">
                                <label class="form-check-label"	for="interest">登山</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="checkbox" class="form-check-input" name="interest"	value="健身" th:checked="${#strings.contains(user.interest,'健身')}">
                                <label class="form-check-label"	for="interest">健身</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="checkbox" class="form-check-input" name="interest"	value="上网" th:checked="${#strings.contains(user.interest,'上网')}">
                                <label class="form-check-label"	for="interest">上网</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="checkbox" class="form-check-input" name="interest"	value="游泳" th:checked="${#strings.contains(user.interest,'游泳')}">
                                <label class="form-check-label"	for="interest">游泳</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-2">
                            <label for="degree">学历</label>
                        </div>
                        <div class="col-md-6">
                            <select id="degree" name="degree" class="form-control">
                                <option value="0" selected>--请选择--</option>
                                <option value="1" th:selected="${user.degree}==1">高中</option>
                                <option value="2" th:selected="${user.degree}==2">专科</option>
                                <option value="3" th:selected="${user.degree}==3">本科</option>
                                <option value="4" th:selected="${user.degree}==4">研究生</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-2">
                            <label for="intro">自我介绍</label>
                        </div>
                        <div class="col-md-6">
                            <textarea name="intro" rows="5" cols="20" class="form-control">[[${user.intro}]]</textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="form-group">
                        <div class="text-center">
                            <button class="btn btn-primary" type="submit">确定</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button class="btn btn-secondary" type="reset">重置</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
